<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>对账明细</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/css.css" />
</head>

<body>
<style>
    [v-cloak] {
        display: none;
    }
</style>
    <div v-cloak id="wrap" class="flex-wrap flex-vertical reconciliation">
        <header>
            <ul>
                <li class="active">
                    <i onclick="back()" class="icon iconfont icon-back"></i>
                    <span>对账明细</span>
                </li>
            </ul>
        </header>
        <div class="reconciliation fixed-header">
            <div>
                <div class="reconciliations">
                    <div class="reconciliations-title">
                        <div class="reconciliations-titlel">交易金额</div>
                        <div class="reconciliations-titler">+{{total}}</div>
                    </div>
                    <div class="reconciliations-detail">
                        <div class="reconciliations-detail-title">
                            <span>商品名称</span>
                            <span>{{titles}}</span>
                        </div>
                        <div class="reconciliations-detail-other">
                            <span>数量</span>
                            <span>{{amount}}</span>
                        </div>
                        <div class="reconciliations-detail-other">
                            <span>单价</span>
                            <span>{{price}}</span>
                        </div>
                        <div class="status0" v-if="status==0">
                            <div class="reconciliations-detail-other">
                                <span>状态</span>
                                <span>{{status}}</span>
                            </div>
                            <div class="reconciliations-detail-type">
                                <div class="reconciliations-detail-type1 hover"><i class="icon iconfont icon-weixin"></i><span>微信</span>
                                </div>
                                <div class="reconciliations-detail-type2"><i class="icon iconfont icon-zhifubao"></i><span>支付宝</span>
                                </div>
                            </div>
                        </div>
                        <div class="status1" v-if="status==1">
                            <div class="reconciliations-detail-other">
                                <span>交易时间</span>
                                <span>2017-02-30 12:30:20</span>
                            </div>
                            <div class="reconciliations-detail-other">
                                <span>流水单号</span>
                                <span>12345678901234567890</span>
                            </div>
                            <div class="reconciliations-detail-other">
                                <span>备注</span>
                                <span>微信支付</span>
                            </div>
                        </div>
                        <div class="status2" v-if="status==2">
                            <div class="reconciliations-detail-other">
                                <span>状态</span>
                                <span>支付处理中</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="login-form">
                    <div class="sub-login">
                        提交
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script>
var vm = new Vue({
    el: "#wrap",
    data: {
        title: '详情',
        id: 1,
        titles: '',
        contents: [],
        total: '',
        amount: 0,
        price: 0,
        status: 0
    },
    mounted: function() {
        var that = this;
        apiready = function() {
            that.getDetail()
        };
    },
    methods: {
        getDetail: function() {
            var that = this;
            showProgress();
            var id = api.pageParam.name
            var token = $api.getStorage('userInfo').token
            api.ajax({
                url: ajaxRoute.accountdetail,
                method: 'post',
                data: {
                    values: {
                        token: token,
                        id: id
                    }
                }
            }, function(res, err) {
                alert(JSON.stringify(res))
                // alert(id)
                if (res.code == 1) {
                    api.hideProgress();
                    // that.contents = ret.data
                    that.titles = res.data.title
                    that.total = res.data.total
                    that.amount = res.data.amount
                    that.price = res.data.price
                    that.status = res.data.status
                    // console.log(res.data)
                } else {
                    api.hideProgress();
                    api.toast({ msg: res.msg, location: 'middle' });
                }
            });
        }
    },
    filters: {
        getThumb: function(value) {
            var phone = value
            return ajaxUrl + '/' + phone
        },
    }
})
</script>
